<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>

<body>
    <div id="app" class="demo">
        <hr>

        <input v-model="username">
        <input v-model="password">
        <button @click="login">登录</button>

        <hr>
        <div>{{msg}}</div>
        <hr>
        <button @click="getGoods">获取信息</button>
    </div>
</body>
<script>

    let token = "";
    const HelloVueApp = {
        data() {
            return {
                msg: 'hello world',
                username: '',
                password: ''
            }
        },
        methods: {
            //登录
            login() {
                //配置请求的基准URL地址
                axios.defaults.baseURL = 'http://127.0.0.1:8080/'

                axios.post('/login', {
                    "username": this.username,
                    "password": this.password
                })
                    .then(response => {
                        this.msg = response;
                        token = response.data.token;
                        console.log(token);
                        //配置请求头信息
                        axios.defaults.headers['Authorization'] = token;

                    })
                    .catch(e => {
                        console.log(e);
                    })
            },
            getGoods() {
                //请求列表信息
                axios.get('/system/user/list')
                    .then(response => {
                        this.msg = response;
                    }).catch(e => {
                        console.log(e);
                    })
            }
        }
    }

    Vue.createApp(HelloVueApp).mount('#app')
</script>

</html>